<template>
  <TmTabbar :autoSelect="false" :shadow="4" :show-safe="true" :active="getCurrent">
    <template v-for="item in tabbarList" :key="item.text">
      <TmTabbarItem
        @click="handleItemClick(item.path)"
        :text="item.text"
        :icon="item.icon"
        :count="item.path === 'contact' ? auditMessageCount : 0"
        dot-color="#EA5E0E"
      ></TmTabbarItem>
    </template>
  </TmTabbar>
</template>

<script lang="ts" setup>
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import routerConfig from '@/router/config';
  import { getUrlName } from '@/router';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps<{
    path: `${TabbarPageEnum}`;
  }>();

  const { auditMessageCount } = storeToRefs(useUserStore());
  const getCurrent = computed(() => {
    return tabbarList.value.findIndex((v) => v.path === props.path);
  });

  const getTabbarIcon = (pageName: TabbarPageEnum) => {
    switch (pageName) {
      case 'home':
        return 'ali-icon icon-shouyefill';
      case 'contact':
        return 'ali-icon icon-tongxunlu1';
      case 'chat':
        return 'ali-icon icon-main_comment_fill';
      case 'mine':
        return 'ali-icon icon-shezhi';
    }
  };

  const tabbarList = computed(() => {
    const list = routerConfig.tabBar?.list || [];
    return list.map((v) => {
      const pageName = getUrlName(v.pagePath) as TabbarPageEnum;

      return {
        text: v.text,
        icon: getTabbarIcon(pageName!),
        path: pageName,
      };
    });
  });

  const handleItemClick = (page: TabbarPageEnum) => {
    switchTab(page as any);
  };
</script>
